import React ,{ useEffect ,useState}from 'react';
import { Form, Input, Select, Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Outlet, useNavigate } from "react-router-dom";
import List from "./Data_list";
import { _postPageData } from "./Api";

const { Option } = Select;

const Products_data = () => {
  const navigate = useNavigate(); // 使用 useNavigate 钩子

  const onFinish = (values) => {
    console.log('data: ', values);
    // 调用 List 组件，传入values
    List({ ...values });
  };

  const onAdd = () => {
    navigate('/home/products_data/add')
  }

  const [pageData,setPageData] = useState({})//存储检索信息
  const [list,setList] = useState([])//存储商品列表

  useEffect(() => {
    const postReq = async () => {
      try {     
        const res = await _postPageData({
          "count": 1,
          "pageSize": 10
        });
        // console.log(res.data.list);
        setList(res.data.list);
        
      } catch (err) {
        console.log("error:", err);
      }
    };
    postReq();
  }, []);

  return (
    <>
      <h1>商品管理</h1>
      <p>
        仓库商品信息展示，可以进行新增商品、搜索商品、编辑商品、删除商品操作
      </p>
      <div>
        <Form onFinish={onFinish} layout="inline">
          <Form.Item name="popularity" label="火爆程度">
            <Select className='select'>
              {list.map((item) => (
                <Option value={item.popularity}>{item.popularity}</Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item name="commodityName" label="商品名称">
            <Input />
          </Form.Item>

          <Form.Item name="productCategory" label="商品分类">
            <Select className='select'>
              {list.map((item) => (
                <Option value={item.categoryId}>{item.categoryId}</Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item name="inventoryStatus" label="库存状态">
            <Select className='select'>
              <Option value="inStock">有货</Option>
              <Option value="outOfStock">缺货</Option>
            </Select>
          </Form.Item>

          <Form.Item shouldUpdate={true}>
            {() => (
              <Button type="primary" htmlType="submit">
                <SearchOutlined />
              </Button>
            )}
          </Form.Item>

          <Button type="primary" onClick={onAdd} className="addBtn">
        新增商品
       </Button>
        </Form>
        
      </div>
      <Outlet />
    </>
  );
};

export default Products_data;
